import React from "react";
import FavoriteIcon from "../../../shared/icons/favorite.svg?react";
import CartIcon from "../../../shared/icons/cart.svg?react";
import ImageAtom from "../../Atoms/Image.Atom";
import ImageEnum from "../../Atoms/Image.Atom/enum";
import Link from "next/link";
import { useTranslation } from "react-i18next";
import TextAtom from "../../Atoms/Text.Atom";
import TextAtomEnum from "../../Atoms/Text.Atom/enum";

interface IconsMenuProps {}

const IconsMenu: React.FC<IconsMenuProps> = () => {
  const { t } = useTranslation();

  return (
    <div className="flex items-center  gap-[30px]">
      <div className="flex flex-col items-center cursor-pointer">
        <Link
          href="/wishlist"
          className="flex flex-col items-center cursor-pointer"
        >
          <ImageAtom
            type={ImageEnum.enum_defaultSvg}
            icon={<FavoriteIcon />}
            className="h-6 w-7 fill-tiffany"
          />
          <TextAtom type={TextAtomEnum.enum_h6} className="mt-1 text-gray">
            {t("WishListPage.title")}
          </TextAtom>
        </Link>
      </div>
      <Link href="/cart" className="flex flex-col items-center cursor-pointer">
        <ImageAtom
          type={ImageEnum.enum_defaultSvg}
          icon={<CartIcon />}
          className="h-6 w-7 fill-tiffany"
        />
        <TextAtom type={TextAtomEnum.enum_h6} className="mt-1 text-gray">
          {t("CartPage.title")}
        </TextAtom>
      </Link>
    </div>
  );
};
export default React.memo(IconsMenu);
